<template>
    <div>
        <div class="content">
            <div class="strategyContent">
                <div style="margin-bottom: 10px">
                    <el-input placeholder="请输入TriggerID" v-model="strategyIdSearch" style="width: 300px;"
                        suffix-icon="el-icon-search" clearable>
                    </el-input>
                    <el-button type="primary" style="margin-left: 10px;" @click="getStrategyConfigList">查询</el-button>
                </div>
                <el-table v-loading="strategyConfigPageLoading" :data="strategyConfigList" style="width: 100%">
                    <el-table-column prop="strategyId" label="TriggerID" width="120"></el-table-column>
                    <el-table-column label="策略组ID">
                        <template #default="scope">
                            <span v-if="scope.row.groupId == 0">-</span>
                            <span v-else>{{ scope.row.groupId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="策略组名/状态">
                        <template #default="scope">
                            <span v-if="!scope.row.groupName">-</span>
                            <span v-else><span>{{ scope.row.groupName }}/</span>
                                <span v-if="scope.row.status == 0">暂停</span>
                                <span v-if="scope.row.status == 1">启用</span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="配置ID">
                        <template #default="scope">
                            <div v-if="!scope.row.configId">-</div>
                            <div v-else>
                                <span>{{ scope.row.configId }}/</span>
                                <el-popover placement="top" :width="800" trigger="click">
                                    <template #reference>
                                        <el-button type="text"
                                            @click="getStrategyConfigDetail(scope.row.configId)">查看详情</el-button>
                                    </template>
                                    <el-descriptions v-loading="strategyConfigDetailLoading" class="current-strategy"
                                        column='3'>
                                        <el-descriptions-item label="配置ID">{{ strategyConfigDetail.id
                                        }}</el-descriptions-item>
                                        <el-descriptions-item label="版本号">{{ strategyConfigDetail.version
                                        }}</el-descriptions-item>
                                        <el-descriptions-item label="采集前秒数">{{ strategyConfigDetail.collectTimeBefore }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="采集后秒数">{{ strategyConfigDetail.collectTimeAfter }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="最大触发频次">
                                            <span v-if="strategyConfigDetail.cycle == 'day'">{{
                                                strategyConfigDetail.triggerCount }}次/天</span>
                                            <span v-if="strategyConfigDetail.cycle == 'month'">{{
                                                strategyConfigDetail.triggerCount }}次/月</span>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="上云自动压测">
                                            <span v-if="strategyConfigDetail.dataPload == 0">否</span>
                                            <span v-if="strategyConfigDetail.dataPload == 1">是</span></el-descriptions-item>
                                        <el-descriptions-item label="触发性能监控的故障等级">{{ strategyConfigDetail.plogFaultLevel }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="性能监控">
                                            <span v-if="strategyConfigDetail.plogLongtermMonitor == 0">关闭</span>
                                            <span v-if="strategyConfigDetail.plogLongtermMonitor == 1">开启</span>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="全量日志上传">
                                            <span v-if="strategyConfigDetail.uploadAllLog == 0">否</span>
                                            <span v-if="strategyConfigDetail.uploadAllLog == 1">是</span>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="申请人">{{
                                            strategyConfigDetail.applicant }}</el-descriptions-item>
                                        <el-descriptions-item label="修改时间">{{
                                            strategyConfigDetail.modifyTime }}</el-descriptions-item>
                                    </el-descriptions>
                                </el-popover>
                                <el-button type="text"
                                    @click="visible = true, carPageData.strategyConfigId = scope.row.configId, showCars()">涉及车辆</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifyTime" label="策略配置修改时间" width="200"></el-table-column>
                </el-table>
                <el-pagination :currentPage="strategyConfigPageData.current" v-model:page-size="strategyConfigPageData.size"
                    :total="strategyConfigPageData.total" background layout="total, prev, pager, next"
                    style="padding: 20px;float: right" @current-change="strategyConfigPageChange">
                </el-pagination>
            </div>
            <el-dialog v-model="visible" title="当前生效车辆列表" width="80%">
                <div style="margin: 6px 0px;">
                    <el-radio-group v-model="allOrCurrent" @change="allOrCurrentChange()" size="small">
                        <el-radio-button label="当前生效" />
                        <el-radio-button label="历史配置" />
                    </el-radio-group>
                    <el-input placeholder="请输入车辆VIN" v-model="carVinSearch" style="width: 200px;top: 2px;margin-left: 10px;"
                        suffix-icon="el-icon-search" clearable size="small">
                    </el-input>
                    <el-button type="primary" style="margin-left: 10px;top: 2px;" @click="searchCars()"
                        size="small">查询</el-button>
                    <el-pagination :currentPage="carPageData.current" v-model:page-size="carPageData.size"
                        :total="carPageData.total" background layout="total, prev, pager, next,"
                        style="margin:3px 0px;float: right" @current-change="carPageChange">
                    </el-pagination>
                </div>
                <el-table v-loading="carListLoading" :data="carList">
                    <el-table-column property="vin" label="VIN号" min-width="120" />
                    <el-table-column property="virtualVin" label="虚拟VIN号" min-width="260"></el-table-column>
                    <el-table-column label="智驾域控类型">
                        <template #default="scope">
                            <span v-if="scope.row.domainControlType == 0">MDC</span>
                            <span v-if="scope.row.domainControlType == 1">TDA4</span>
                            <span v-if="scope.row.domainControlType == 2">J3</span>
                            <span v-if="scope.row.domainControlType == 3">ADC</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="车辆用途类型">
                        <template #default="scope">
                            <span v-if="scope.row.vehicleUseType == 0">量产车</span>
                            <span v-if="scope.row.vehicleUseType == 1">研发车</span>
                            <span v-if="scope.row.vehicleUseType == 2">台架</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!-- <RollBackPopupComponent ref="rollBackPopupComponent" @feedbackFn="feedbackFn" /> -->

    </div>
</template>

<script>
import { getStrategyConfigByStrategyIdApi } from '@/api/strategyGroup.js';
import { getStrategyConfigDetailApi } from '@/api/strategyConfig.js';
import { getRelationCarPageByStrategyConfigIdApi, getCurrentCarPageByStrategyConfigIdApi } from '@/api/carManage/policyManage.js';
import { computed, onMounted, reactive, ref } from 'vue';
import RollBackPopupComponent from './components/RollBackPopupComponent.vue';
import { useStore } from 'vuex';
import { ElMessage } from "element-plus";
import { isEmpty } from "@/utils/util.js";

export default {
    components: {
        RollBackPopupComponent,
    },
    setup() {
        const strategyConfigPageData = reactive({
            total: 0,
            current: 1,
            size: 10,
        });
        const carPageData = reactive({
            total: 0,
            current: 1,
            size: 10,
            strategyConfigId: ''
        });
        const strategyIdSearch = ref(null);
        const carVinSearch = ref(null);
        const defaultStrategyConfigId = ref(null);
        const carPageList = ref([]);
        const carList = ref([]);
        const carListLoading = ref(false);
        const strategyConfigDetail = ref({});
        const strategyConfigDetailLoading = ref(false);
        const visible = ref(false);
        const strategyConfigPageLoading = ref(false);
        const strategyConfigList = ref([]);
        const store = useStore();
        const btnPermission = computed(() => store.state.btnPermission);

        const getStrategyConfigList = () => {
            strategyConfigList.value = [];
            if (isEmpty(strategyIdSearch.value)) {
                ElMessage({
                    message: 'TriggerID为空',
                    type: 'warning',
                })
                return
            }
            if (strategyIdSearch.value != parseInt(strategyIdSearch.value)) {
                ElMessage({
                    message: 'TriggerID需要是纯数字',
                    type: 'warning',
                })
                return
            }
            strategyConfigPageLoading.value = true
            getStrategyConfigByStrategyIdApi({
                size: strategyConfigPageData.size,
                current: strategyConfigPageData.current,
                strategy_id: strategyIdSearch.value,
            }).then((res) => {
                if (res.data.code == 200) {
                    let response = res.data.data;
                    strategyConfigList.value = response.records;
                    strategyConfigPageData.total = response.total;
                    strategyConfigPageData.current = response.current;
                }
            });
            strategyConfigPageLoading.value = false
        };

        const getStrategyConfigDetail = (configId) => {
            strategyConfigDetailLoading.value = true
            getStrategyConfigDetailApi({
                id: configId,
            }).then((res) => {
                if (res.data.code == 200) {
                    let response = res.data.data;
                    strategyConfigDetail.value = response;
                }
            });
            strategyConfigDetailLoading.value = false
        };

        const historyConfigDetail = ref(null);
        const viewDetailsFn = (rowData) => {
            historyConfigDetail.value.switchVisible(rowData);
        };
        const rollBackPopupComponent = ref(null);
        const rollBackFn = (row) => {
            rollBackPopupComponent.value.switchVisible(row);
        };


        onMounted(() => {
        });
        const feedbackFn = () => {
        };

        const strategyConfigPageChange = (val) => {
            strategyConfigPageData.current = val;
            getStrategyConfigList();
        };

        function isEmptyObj(obj) {
            return JSON.stringify(obj) === '{}'
        }

        const allOrCurrentChange = () => {
            carPageData.total = 0;
            carPageData.current = 1;
            getCarList()
        }

        const allOrCurrent = ref('当前生效');

        const searchCars = () => {
            carPageData.total = 0;
            carPageData.current = 1;
            getCarList()
        }

        const carPageChange = (val) => {
            carPageData.current = val;
            getCarList();
        };

        const getCarList = () => {
            carList.value = []
            if (allOrCurrent.value === '当前生效') {
                getCurrentCarPageByStrategyConfigIdApi({
                    size: 10,
                    current: carPageData.current,
                    configId: carPageData.strategyConfigId,
                    vin: carVinSearch.value
                }).then((res) => {
                    if (res.data.code === 200) {
                        let response = res.data.data;
                        carList.value = response.records;
                        carPageData.total = response.total;
                        carPageData.current = response.current;
                    }
                    strategyLoading.value = false
                });
            }

            if (allOrCurrent.value === '历史配置') {
                getRelationCarPageByStrategyConfigIdApi({
                    size: 10,
                    current: carPageData.current,
                    configId: carPageData.strategyConfigId,
                    vin: carVinSearch.value
                }).then((res) => {
                    if (res.data.code === 200) {
                        let response = res.data.data;
                        carList.value = response.records;
                        carPageData.total = response.total;
                        carPageData.current = response.current;
                    }
                    strategyLoading.value = false
                });
            }
        }

        const showCars = () => {
            carList.value = []
            allOrCurrent.value = '当前生效'
            getCurrentCarPageByStrategyConfigIdApi({
                size: 10,
                current: carPageData.current,
                configId: carPageData.strategyConfigId,
                vin: carVinSearch.value
            }).then((res) => {
                if (res.data.code === 200) {
                    let response = res.data.data;
                    carList.value = response.records;
                    carPageData.total = response.total;
                    carPageData.current = response.current;
                }
                strategyLoading.value = false
            });

        }

        return {
            strategyConfigPageData,
            strategyIdSearch,
            strategyConfigPageLoading,
            strategyConfigList,
            getStrategyConfigList,
            viewDetailsFn,
            rollBackFn,
            rollBackPopupComponent,
            strategyConfigPageChange,
            historyConfigDetail,
            feedbackFn,
            btnPermission,
            isEmptyObj,
            getStrategyConfigDetail,
            strategyConfigDetail,
            carPageList,
            visible,
            carPageChange,
            carPageData,
            carVinSearch,
            defaultStrategyConfigId,
            carListLoading,
            allOrCurrentChange,
            allOrCurrent,
            carList,
            searchCars,
            showCars
        };
    },
};
</script>


<style lang="less" scoped>
.crumbs {}

.content {
    padding: 20px;

    .strategyContent {
        background: #ffffff;
        padding: 10px 20px;
    }

    .policyGroupContent {
        margin-top: 20px;
        background: #ffffff;
        padding: 10px 20px;
    }

    /deep/.el-dialog__body {
        padding: 0px 20px;
    }
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    margin-bottom: 10px;
}

.current-strategy {
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    // background-color: #F5F7FA;
    overflow: hidden;
    color: #303133;
    padding: 20px;
    margin-bottom: 10px;

    .el-descriptions__body {
        // background-color: #F5F7FA;
    }
}

/deep/.el-dialog__body {
    padding: 20px 20px 70px 20px
}

/deep/.el-backtop {
    bottom: 100px;
}
</style>
